#battle {
  width: 100%;
  height: 100%;
  background: #000;
  text-align: left;
}
#battle .middle {
  width: 100%;
  height: 35%;
  border: 1px solid #fff;
}
#battle .bottom {
  width: 100%;
  height: 65%;
  border: 1px solid #fff;
}
#battle .left, #battle .right {
  width: 50%;
  height: 100%;
  float: left;
  border: 1px solid #fff;
}
#battle .bossImg {
  width: 100%;
  height: 50%;
  position: relative;
}
#battle .bossMsg {
  width: 100%;
  height: 50%;
}
#battle .damageMsg {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#battle .heroInfo {
  width: 100%;
}
#battle .lvlInfo, #battle .attri {
  border: 1px solid #fff;
}
#battle .progress-bar {
  position: relative;
  height: 1em;
  float: left;
  border-radius: 0.3em;
  -webkit-transition: 0.4s linear;
  transition: 0.4s linear;
  transition-property: width;
  width: 100%;
  background-color: #f63a0f;
}
#battle .progress .info {
  position: absolute;
  top: 0;
  text-align: center;
  font-size: 0.8em;
  width: 100%;
  background-color: transparent;
}
#battle .lvlInfo div{
  line-height: 2em;
}

#battle .right div{
  line-height: 2em;
}
#battle button {
  float:right;
  border-width: 0.3em;
  background-color: transparent;

}
